const btns = document.querySelectorAll(".submenu__btn");
const dropdowns = document.querySelectorAll(".dropdown");
const submenu = document.querySelector(".header__menu-submenu");
const activeClassdropdowns = "dropdown__active";
const activeClassbtns = "btn__active";
const submenuClassActive = "submenu__active";

btns.forEach((item) => {
  item.addEventListener("click", function () {
    let DropThis = this.parentElement.querySelector(".dropdown");
    dropdowns.forEach((el) => {
      if (el != DropThis) {
        el.classList.remove(activeClassdropdowns);
      }
    });
    btns.forEach((el) => {
      if (el != this) {
        el.classList.remove(activeClassbtns);
      }
    });
    DropThis.classList.toggle(activeClassdropdowns);
    this.classList.toggle(activeClassbtns);
    if (this.classList.contains(activeClassbtns)) {
      submenu.classList.add(submenuClassActive);
    } else submenu.classList.remove(submenuClassActive);
  });
});

document.body.addEventListener("click", function (evt) {
  if (evt.target.classList.contains(activeClassbtns)) {
    return;
  }
  submenu.classList.remove(submenuClassActive);
  dropdowns.forEach(function (el) {
    el.classList.remove(activeClassdropdowns);
  });
  btns.forEach(function (el) {
    el.classList.remove(activeClassbtns);
  });
});

// ------------ Simplebar --------------

document.querySelectorAll(".dropdown__simplebar").forEach((dropdown) => {
  new SimpleBar(dropdown, {
    /* чтобы изначально ползунок был виден */
    autoHide: false,
    /* с помощью этого значения вы можете управлять высотой ползунка*/
    scrollbarMaxSize: 28,
  });
});
